This content was loaded via AJAX!

HTML Markup for these tabs

<div id="ajax-tab-container" class='tab-container'>
 <ul class='tabs'>
   <li class='tab'><a href="/easytabs-ajax.html #html-content" data-target="#tabs-ajax-html">HTML Markup</a></li>
   <li class='tab'><a href="/easytabs-ajax.html #js-content" data-target="#tabs-ajax-js">Required JS</a></li>
 </ul>
 <div class='panel-container'>
  <div id="tabs-ajax-html"></div>
  <div id="tabs-ajax-js"></div>
 </div>
</div>

For AJAX tabs, the URL for the content goes in the href attribute, and we move the target panel's id to the data-target attribute; this difference in markup keeps things semantically meaningful and degrades gracefully (see this post for more details).

Notice that we can also load a page fragment via ajax by adding a CSS selector after the AJAX URL.

This content was loaded via AJAX!

JS for these tabs

$(document).ready(function(){
  $('#ajax-tab-container').easytabs();
});